<template>
  <div>
    <!-- 添加或修改实验室测评对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="640px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" >
      <el-form-item label="测评创建" prop="createTime">
        {{form.createTime}}<span style="margin-left: 20px;">由&nbsp;{{form.createBy}}&nbsp;创建&nbsp;&nbsp;</span>
        <div style="float:right" v-if="form.status==1">
          <el-button type="text" @click="exporScore(form.instanceId)">下载实验室评分</el-button>
        </div>
      </el-form-item>
        <el-form-item label="测评名称">
         {{form.evalutionName}}
        </el-form-item>
        <el-form-item label="截止时间">
         {{form.planEndTime}}
        </el-form-item>
        <el-form-item label="备注">
          {{form.mark}}
         </el-form-item>
        <div class="form_table">
          <el-table :data="form.topicTaskList" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }">
            <el-table-column label="实验中心" prop="orgName" >
            </el-table-column>
            <el-table-column label="自查工号" prop="userName" align="center">
            </el-table-column>
            <el-table-column label="自查姓名" prop="nickName" align="center">
            </el-table-column>
          </el-table>
        </div>
        <el-form-item label="测评方案">
         <UploadCom ref="upload" disabled :userFileList="fileList"
           class="form_long" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listTopic, getTopic, delTopic, addTopic, updateTopic, exportTopic } from "@/api/evalution/topic";
import UploadCom from "@/views/labdata/commons/upload.vue";
import ChooseUser from "@/views/labdata/employee/user_choose_com.vue";
 import { searchEmployee, getEmployeeInfo } from "@/api/labdata/employee";
 import {
   treeselect
 } from "@/api/labdata/orgnization";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "TopicDetails",
  components: { UploadCom,ChooseUser,Treeselect},
  data() {
    return {
      //附件集合
      fileList: [],
      deptOptions: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 实验室评测表格数据
      topicList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        evalutionName: null,
        planEndTime: null,
        mark: null,
        finishedTime: null
      },
      // 表单参数
      form: {
        topicTaskList:[],
      },
      // 表单校验
      rules: {
        evalutionName: [
          { required: true, message: "评测标题不能为空", trigger: "blur" }
        ],
        planEndTime: [
          { required: true, message: "截止时间不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
  },
  methods: {
    exporScore(instanceId){
      this.$confirm('要下载本次实验室评测分数文件?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return exportTopic({instanceId:instanceId});
          }).then(response => {
            this.download(response.msg);
          })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        instanceId: null,
        evalutionName: null,
        planEndTime: null,
        mark: null,
        createTime: null,
        createBy: null,
        finishedTime: null,
        topicTaskList:[],
      };
      this.resetForm("form");
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const instanceId = row.instanceId;
      getTopic(instanceId).then(response => {
        this.form = response.data;
        if (this.form) {
         this.fileList = this.form.images;
        }
        this.open = true;
        this.title = "实验室评测详情";
      });
    },
  }
};
</script>
<style scoped lang="scss">
  .table_button {
    width: 100%;
    text-align: center;
    line-height: 20px;
    border-bottom: 1px solid #f6f5f5;
    color: #43bef8;
    cursor: pointer;
    border: 0;
  }
</style>
